<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - 归物</title>

    <!-- 网站图标 -->
    <link rel="icon" type="image/png" href="/icon.png">
    <link rel="shortcut icon" type="image/png" href="/icon.png">
    <link rel="apple-touch-icon" href="/icon.png">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
        }
        .register-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        .register-header {
            text-align: center;
            padding: 2rem 0;
        }
        .register-header i {
            font-size: 3rem;
            color: #007bff;
            margin-bottom: 1rem;
        }
        .form-control {
            border-radius: 10px;
            border: 2px solid #e9ecef;
            padding: 0.75rem 1rem;
        }
        .form-control:focus {
            border-color: #007bff;
            box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
        }
        .btn-register {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 10px;
            padding: 0.75rem 2rem;
            font-weight: bold;
            color: white;
        }
        .btn-register:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        .login-link {
            text-align: center;
            margin-top: 1rem;
        }
        .alert {
            border-radius: 10px;
        }
        .form-text {
            font-size: 0.875rem;
            color: #6c757d;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6 col-lg-5">
                <div class="register-card">
                    <div class="register-header">
                        <img src="/icon.png" alt="归物" style="width: 48px; height: 48px; margin-bottom: 10px;">
                        <h2>用户注册</h2>
                        <p class="text-muted">创建您的账户</p>
                    </div>
                    
                    <div class="card-body p-4">
                        <!-- 错误消息 -->
                        <div th:if="${error}" class="alert alert-danger" role="alert">
                            <i class="fas fa-exclamation-triangle"></i>
                            <span th:text="${error}">错误信息</span>
                        </div>
                        
                        <form th:action="@{/register}" th:object="${user}" method="post">
                            <div class="mb-3">
                                <label for="username" class="form-label">
                                    <i class="fas fa-user"></i> 用户名
                                </label>
                                <input type="text" class="form-control" id="username" th:field="*{username}" 
                                       placeholder="请输入用户名" required>
                                <div class="form-text">用户名长度必须在3-20个字符之间</div>
                                <div th:if="${#fields.hasErrors('username')}" class="text-danger">
                                    <span th:errors="*{username}">用户名错误</span>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="email" class="form-label">
                                    <i class="fas fa-envelope"></i> 邮箱
                                </label>
                                <input type="email" class="form-control" id="email" th:field="*{email}" 
                                       placeholder="请输入邮箱地址">
                                <div th:if="${#fields.hasErrors('email')}" class="text-danger">
                                    <span th:errors="*{email}">邮箱错误</span>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="password" class="form-label">
                                    <i class="fas fa-lock"></i> 密码
                                </label>
                                <input type="password" class="form-control" id="password" th:field="*{password}" 
                                       placeholder="请输入密码" required>
                                <div class="form-text">密码长度至少6个字符</div>
                                <div th:if="${#fields.hasErrors('password')}" class="text-danger">
                                    <span th:errors="*{password}">密码错误</span>
                                </div>
                            </div>
                            
                            <div class="d-grid">
                                <button type="submit" class="btn btn-register">
                                    <i class="fas fa-user-plus"></i> 注册
                                </button>
                            </div>
                        </form>
                        
                        <div class="login-link">
                            <p class="text-muted">已有账户？ 
                                <a href="/login" class="text-decoration-none">立即登录</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html> 